<template>
	<view>
		<!-- 状态栏占位符 隐藏导航条时使用-->
		<view class="status_bar"> </view>
		<view class="home-header flex space">
			<view class="search">
				<uni-search-bar @confirm="search" :focus="false" cancelButton="none" :placeholder="$t('Search drama')"
					v-model="searchValue" bgColor="#FFFFFF">
				</uni-search-bar>
			</view>
			<view class="setlang ft14 mr15" v-if="langs">
				<picker @change="changelang" :value="langset" :range="langs" range-key="lang_name">
					<view class="uni-input lang-button">{{langs[langset].lang_name}}</view>
				</picker>
			</view>
		</view>
		<view>
			<view class="pd5_15" v-if="banners">
				<home-banner :banners="banners" :key="bannerkey"></home-banner>
			</view>
			<view class="flex pt10 pb10" v-if="fastnav.length>0">
				<block v-for="(value,key) in fastnav" :key="key">
					<view class="col2 text-center" @click="linkTo" :data-link="value.url">
						<view>
							<image style="width: 100rpx; height: 100rpx;" :src="value.image"></image>
						</view>
						<view class="ft14 ftw600 cl-navlink">{{value.langname}}</view>
					</view>
				</block>
			</view>
			<view class="plr15">
				<view class="mt24" v-if="hotdata.length>0">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<text style="color: #3d3d3d;" class="ft16 ftw600 cl-main ">{{$t('Recommend dramas')}}</text>
							<zui-svg-icon color="#FF6600"  icon="hand-up" />
						</view>
						<view @click="linkTo" data-link="/pages/client/tuan/ss?stype=ishot" class="ft14 cl-notice">
							{{$t('More')}}
						</view>
					</view>

					<view class="mt16 flex space">
						<block v-for="(value,key) in hotdata" :key="key" v-if="key<3">
							<view class="pb10" style="width:31%; position: relative; border-radius:20rpx;"
								@click="detail(value.id,0)">
								<image class="vod-img" mode="aspectFill" :src="value.img"></image>
								<view class="vod-name text-over cl-title">{{value.name}}</view>
								<view class="vod-nums flex">
									<view class="ft12 cl-info">{{value.totalnum}}</view>
									<view class="flex alcenter ft12 cl-info"><zui-svg-icon  style="margin-right: 5rpx;"  icon="eye"
											size="14"></zui-svg-icon>
										{{value.views}}
									</view>
								</view>
							</view>
						</block>

					</view>

				</view>
				<view class="mt24" v-if="givedata.length>0">
					<view class="flex alcenter space">
						<view class="flex alcenter">
							<text style="color: #3d3d3d;" class="ft16 ftw600 cl-main ">{{$t('Play ranking')}}</text>
							<zui-svg-icon color="#FF6600" size="20" icon="fire" />
						</view>
						<navigator url="/pages/client/video/list?stype=top">
							<view class="ft14 cl-notice">{{$t('More')}}</view>
						</navigator>
					</view>
					<view class="mt16 flex space">
						<block v-for="(value,key) in givedata" :key="key" v-if="key<3">
							<view class="pb10" style="width:31%; position: relative; border-radius:20rpx;"
								@click="detail(value.id,0)">
								<view class="vod-badge" :class="'bg' + key">{{key+1}}</view>
								<image class="vod-img" mode="aspectFill" :src="value.img"></image>
								<view class="vod-name text-over cl-title">{{value.name}}</view>
								<view class="vod-nums flex">
									<view class="ft12 cl-info">{{value.totalnum}}</view>
									<view class="flex alcenter ft12 cl-info"><zui-svg-icon  style="margin-right: 5rpx;"  icon="eye"
											size="14"></zui-svg-icon>
										{{value.views}}
									</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="mt24">
				<view class="flex alcenter space plr15">
					<view class="flex alcenter">
						<text style="color: #3d3d3d;" class="ft16 ftw600 cl-main ">{{$t('New Drama')}}</text>
						<zui-svg-icon color="#FF6600" size="20" icon="star" />
					</view>
					<navigator url="/pages/client/tuan/ss">
						<view class="ft14 cl-notice">{{ $t('More') }}</view>
					</navigator>
				</view>
				<home-default :datasa="newdata"></home-default>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>
<script>
	import {
		watch
	} from "vue"
	export default {
		data() {
			return {
				langs: [{
					lang_name: ''
				}],
				langset: 0,
				fastnav: [],
				typetab: [],
				selectIndex: 0,
				showdyxx: true,
				dataconfig: [],
				searchValue: '',
				banners: [],
				bannerkey: 0,
				datainfo: [],
				dataindex: [],
				hotdata: [],
				givedata: [],
				newdata: [],
				last_id: 0,
				reload: false,
				status: 'more',
				tabbar_bgcolor: '#ffffff',
				tabbar_color: '#666666',
				tabbar_selectedColor: '#00c657'
			}
		},
		computed: {
			contentText() {
				return {
					contentdown: this.$t('loadmore.down'),
					contentrefresh: this.$t('loadmore.refresh'),
					contentnomore: this.$t('loadmore.nomore')
				}
			}
		},
		onLoad(e) {
			if (e.fxpid) {
				if (e.fxpid > 0) {
					uni.setStorage({
						key: 'fxpid',
						data: e.fxpid
					})
				}
			}
			this.getconfig();
			this.settabbar();
			this.getlang()
			this.getfastnav()
			this.getList()
			this.getNews();
		},
		onReachBottom() {
			if (this.last_id > 0) {
				this.getNews();
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('App name')
			});
		},
		methods: {
			async getconfig() {
				let data = {};
				let [err, res] = await this.$httpas.get('/api/index/index', data);
				if (res.data.code == 1) {
					let sitecfg = res.data.data.site;
					this.bannerkey = this.bannerkey + 1;
					this.banners = res.data.data.banner
					this.tabbar_color = sitecfg.tabbar_color
					this.tabbar_selectedColor = sitecfg.tabbar_selectedColor
					this.tabbar_bgcolor = sitecfg.tabbar_bgcolor

					uni.setTabBarStyle({
						color: this.tabbar_color,
						selectedColor: this.tabbar_selectedColor,
						backgroundColor: this.tabbar_bgcolor,
						borderStyle: 'white'
					})
					uni.setStorageSync('config', res.data.data)
				}
			},
			async settabbar() {
				let data = {
					type: 0
				};
				let [err, res] = await this.$httpas.get('/api/index/navmenu', data);

				if (res.data.code === 1) {
					this.tabbar = res.data.data
				}
				for (var i = 0; i < this.tabbar.length; i++) {
					uni.setTabBarItem({
						index: i,
						pagePath: this.tabbar[i].url,
						text: this.tabbar[i].langname,
						// #ifndef APP-PLUS
						iconPath: this.tabbar[i].image,
						selectedIconPath: this.tabbar[i].image_sel,
						// #endif
					})
				}
			},
			async getlang() {
				let that = this
				let data = {};
				let [err, res] = await this.$httpas.get('/api/index/lang_list', data);
				if (res.data.code == 1) {
					this.langs = res.data.data
					if (that.$lang == 'zh-Hans') {
						that.$lang = 'zh-cn';
					}
					if (that.$lang == 'zh-Hant') {
						that.$lang = 'zh-tw';
					}
					for (var i = 0; i < this.langs.length; i++) {
						if (this.langs[i]['flag'] == that.$lang) {
							this.langset = i;
						}
					}
				}
			},
			changelang(e) {
				var index = e ? e.detail.value : 0;
				this.langset = index
				var lang_flag = this.langs[index].flag
				uni.setStorageSync('langset', index);
				uni.setStorageSync('locale', lang_flag);

				this.$i18n.locale = lang_flag
				uni.setLocale(lang_flag)
				uni.setNavigationBarTitle({
					title: this.$t('App name')
				});
				this.getconfig();
				this.settabbar();
				this.getfastnav();
				this.getList();

				this.reload = true;
				this.last_id = 0;
				this.getNews();
			},
			async getfastnav() {
				let data = {
					type: 1
				};
				let [err, res] = await this.$httpas.get('/api/index/navmenu', data);
				if (res.data.code == 1) {
					this.fastnav = res.data.data
				}
			},
			changetype(index) {
				this.selectIndex = index;
				this.typeid = this.typetab[index].id
				if (this.typeid) {
					uni.navigateTo({
						url: '/pages/client/tuan/ss?typeid=' + this.typeid
					})
				} else {
					uni.navigateTo({
						url: '/pages/client/video/list'
					})
				}
			},
			search(res) {
				uni.navigateTo({
					url: '/pages/client/tuan/ss?keytext=' + res.value
				})
			},
			async getList() {
				let this_ = this
				let data = {};
				let [err, res] = await this.$httpas.get('/api/video/indexdata', data);
				if (res.data) {
					this.hotdata = res.data.hotdata
					this.givedata = res.data.givedata
				}
			},
			async getNews() {
				let data = {};
				var limit = 3;
				if (this.last_id > 0) {
					//说明已有数据，目前处于上拉加载
					this.status = 'loading';
					data.offset = this.last_id * limit;
				}
				data.limit = limit
				let [err, res] = await this.$httpas.get('/api/video/lists', data);
				if (res.data) {
					if (res.data.rows.length > 0) {
						let list = res.data.rows;
						this.newdata = this.reload ? list : this.newdata.concat(list);
						this.reload = false;
						this.last_id = this.last_id + 1;
						if (res.data.total <= this.last_id * limit) {
							this.status = '';
						} else {
							this.status = 'more'
						}
					} else {
						this.status = ''
					}
				}
			},

			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
			linkTo(e) {
				let link = e.currentTarget.dataset.link;
				uni.navigateTo({
					url: link
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		box-sizing: content-box;
	}

	.home-header {
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.search {
		width: 75%;
	}

	.plr15 {
		.ft16 {
			margin-right: 10rpx;
		}
	}

	.setlang {
		margin-top: 24rpx;
	}

	.vod-badge {
		width: 36rpx;
		height: 42rpx;
		border-radius: 0 8rpx;
		position: absolute;
		left: 0;
		top: 0;
		color: white;
		z-index: 100;
		text-align: center;
		opacity: 0.8;
		font-weight: 600;
	}

	.vod-badge.bg0 {
		background-color: red;
	}

	.vod-badge.bg1 {
		background-color: orangered;
	}

	.vod-badge.bg2 {
		background-color: orange;
	}

	.vod-img {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.vod-name {
		font-size: 28rpx;
	}

	.vod-nums {
		flex-direction: row;
		justify-content: space-between;
		padding-top: 8rpx;
	}

	.ggbox .bg {
		width: 100%;
		height: 100rpx;
		border-radius: 16upx 16upx 0 0;
		position: absolute;
		z-index: -100;
	}

	.ggbox .head {
		font-size: 36rpx;
		font-weight: 600;
		color: white;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
	}

	.lang-button {
		background: #FE9C8F;
		color: #fff;
		padding: 10rpx 16rpx;
		font-size: 26rpx;
		border-radius: 32rpx;
	}
</style>